<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>接口加解密</title>
    <style>
        .login-container {
            width: 450px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid red;
        }
        .item {
            margin: 0 auto;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .label {
            width: 60px;
            text-align: right;
            margin-right: 10px;
            font-size: 14px;
        }
        .text {
            width: 200px;
        }
        .text input {
            width: 160px;
            height: 40px;
            border: 1px solid #000;
            background: transparent;
            padding: 0 20px;
        }
        .text:focus {
            outline: none;
            /* 去掉轮廓线 */
            border-color: #ccc;
            /* 自定义边框颜色 */
            box-shadow: none;
            /* 去掉阴影效果 */
        // border-style: solid;
            border: 1px solid #fff;
        }

        .text::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            text-align: left;
            font-style: normal;
        }
        .submit-btn {
            width: 100px;
            height: 30px;
            margin: 0 10px;
        }
    </style>
    <script src="./js/sm4.js"></script>
</head>

<body>
</body>
    <div class="login-container">
        <div class="item">
            <h3>接口加解密实现</h3>
        </div>
        <div class="item">
            <div class="label">用户名</div>
            <div class="text">
                <input type="text" autocomplete="off" id="username" placeholder="请输入用户名" />
            </div>
        </div>
        <div class="item">
            <div class="label">密码</div>
            <div class="text">
                <input type="password" id="password" placeholder="请输入密码" />
            </div>
        </div>
        <div class="item">
            <div class="label">邮箱</div>
            <div class="text">
                <input type="text   " id="email" placeholder="请输入邮箱" />
            </div>
        </div>
        <div class="item">
            <button class="submit-btn" onclick="submitForm()">提交</button>
            <button class="submit-btn" onclick="getUserInfo()">获取用户信息</button>
        </div>
        <div class="item">
            <div id="result"></div>
        </div>
    </div>

    <script>
        const key = '0123456789abcdeffedcba9876543210';
        async function submitForm() {
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            let email = document.getElementById("email").value;
            if (username && password && email) {
                let data = {
                    username,
                    password,
                    email
                }
                let json = JSON.stringify(data);
                console.log("原始数据" + json);
                // ECB
                const encryptData = encrypt(json, key, {});
                const encryptBody = {
                    encryptData
                }
                // const decryptData = decrypt(encryptData, key, {})
                // console.log('加密后结果：' + encryptData);
                // console.log('解密后结果：' + decryptData);
                const response = await fetch('/user/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(encryptBody)
                });
                response.json().then(resp => {
                    console.log(resp);
                    if (resp.code === 200) {
                        alert(decrypt(resp.data, key, {}));
                    }
                });
            }
        }

        async function getUserInfo() {
            let response = await fetch('/user/getUserInfo', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            response.json().then(resp => {
                console.log('返回结果: ', resp);
                if (resp.code === 200) {
                    const result = decrypt(resp.data, key, {});
                    const user = JSON.parse(result);
                    console.log('解密后结果: ', user)
                    console.log(result);
                    document.getElementById('result').innerText = '用户名: ' + user.username + ' 密码: ' + user.password + ' 邮箱: ' + user.email;
                }
            });
        }
    </script>
</html>